<template>
  <div class="app-container">
    <Pagetitle
      :title="pageTitle.title"
      :name="pageTitle.name"
      :btnName="pageTitle.btnName"
      @btnFun="btnFun"
    ></Pagetitle>
    <div class="filter-container">

    </div>
    <div class="table-container min-height brand-tabs">
      <div
        class="brand-always"
        v-if="brandCommonList.length>0"
      >
        常用
      </div>
      <div
        class="brand-box m-bottom"
        v-if="brandCommonList.length>0"
      >
        <template v-for="(item,index) in brandCommonList">
          <div @click="go('taskEntryItem',item)">
            <BrandItem
              :brandItem="item"
              :index="index"
            ></BrandItem>
          </div>
        </template>
      </div>
      <Tabs>
        <TabPane
          label="全部"
          name="0"
        >
          <div class="brand-box">
            <template v-for="(item,index) in brandList">
              <div @click="go('taskEntryItem',item)">
                <BrandItem
                  :brandItem="item"
                  :index="index"
                ></BrandItem>
              </div>
            </template>
          </div>
        </TabPane>
        <TabPane
          v-for="name in classList"
          :label="name.className"
          :key="name.classId"
          :name="name.className"
        >
          <div class="brand-box">
            <template v-for="(item,index) in brandList">
              <div
                @click="go('taskEntryItem',item)"
                v-if="name.classId === item.classId"
              >
                <BrandItem
                  :brandItem="item"
                  :index="index"
                ></BrandItem>
              </div>
            </template>
          </div>
        </TabPane>
      </Tabs>
    </div>

  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  fetchBrandBrandList,
  fetchBrandClassList,
  fetchBrandAddBrand,
  fetchBrandUpdateBrand,
  fetchBrandCommonList
} from "@/api/table";
import { Pagetitle, BrandItem } from "@/components";

export default {
  data() {
    return {
      pageTitle: {
        title: "任务录入"
      },
      brandList: [],
      classList: [],
      brandCommonList: [],
      addBrandModal: false,
      editorBrandModal: false,
      addBrandFrom: {
        brandName: "",
        logoUrl: "",
        classId: ""
      },
      editorBrandFrom: {
        brandName: "",
        logoUrl: "",
        classId: ""
      },
      ruleValidate: {
        brandName: [
          {
            required: true,
            message: "填写姓名",
            trigger: "blur"
          }
        ],
        classId: [
          {
            required: true,
            message: "选择组别",
            trigger: "change",
            type: "number"
          }
        ]
      },
      //下载
      uploadList: []
    };
  },
  components: {
    Pagetitle,
    BrandItem
  },
  mounted() {
    this.getBrandBrandList();
  },
  methods: {
    btnFun() {
      this.addBrandModal = true;
    },
    async getBrandBrandList() {
      const tab = await fetchBrandClassList();
      const res = await fetchBrandBrandList();
      const item = await fetchBrandCommonList({
        userId: this.userId
      });
      this.brandList = [];
      this.classList = [];
      this.brandCommonList = [];
      res.data.forEach(item => {
        const data = {};
        data.className = item.className;
        data.brandName = item.brandName;
        data.brandId = item.brandId;
        data.classId = item.classId;
        data.logoUrl = item.logoUrl;
        this.brandList.push(data);
      });
      tab.data.forEach(item => {
        const data = {};
        data.className = item.className;
        data.classId = item.id;
        this.classList.push(data);
      });
      item.data.forEach(item => {
        const data = {};
        data.className = item.className;
        data.brandName = item.brandName;
        data.brandId = item.id;
        data.classId = item.classId;
        data.logoUrl = item.logoUrl;
        this.brandCommonList.push(data);
      });
    },
    async brandAddBrand(name) {
      await fetchBrandAddBrand({
        brandName: this.addBrandFrom.brandName,
        logoUrl: this.addBrandFrom.logoUrl,
        classId: this.addBrandFrom.classId
      });
      this.closeModal(name);
      this.$Message.success("修改成功");
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    closeModal(name) {
      this.resetForm(name);
      this.addBrandModal = false;
      this.editorBrandModal = false;
    },
    handleSubmitAddBrand(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.brandAddBrand(name);
        }
      });
    },
    go(url, info) {
      this.$router.push({
        path: url,
        query: {
          brandId: info.brandId,
          brandName: info.brandName
        }
      });
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    }
  },
  computed: {
    ...mapGetters(["userId"])
  }
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixin";
.brand-always {
  font-size: 14px;
  padding: 0 28px;
}
.min-height {
  min-height: calc(78vh);
}
.brand-box {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0px 20px 20px;
}
.table-container {
  padding: 0px 0px 0px 0px;
}
.m-bottom {
  margin-bottom: 30px;
}
.brand-tabs {
  padding-top: 20px;
}
</style>